<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/11/28
  Time: 9:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>穷在闹市出品</title>

    <!-- 公共样式 开始 -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/manager/css/base.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/manager/css/iconfont.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/manager/framework/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/manager/layui/css/layui.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/manager/layui/layui.js"></script>
    <!-- 滚动条插件 -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/manager/css/jquery.mCustomScrollbar.css">
    <script src="${pageContext.request.contextPath}/manager/framework/jquery-ui-1.10.4.min.js"></script>
    <script src="${pageContext.request.contextPath}/manager/framework/jquery.mousewheel.min.js"></script>
    <script src="${pageContext.request.contextPath}/manager/framework/jquery.mCustomScrollbar.min.js"></script>
    <script src="${pageContext.request.contextPath}/manager/framework/cframe.js"></script><!-- 仅供所有子页面使用 -->
    <!-- 公共样式 结束 -->

    <style>
        .layui-form-label{
            width: 100px;
        }
        .layui-input-block{
            margin-left: 130px;
        }
        .layui-form{
            margin-right: 30%;
        }
    </style>


</head>
<style type="text/css">
    #divUL div{
        float: left;
    }
</style>

<body>
<div class="cBody">
    <form class="layui-form" action="${pageContext.request.contextPath}/flowerServlet?action=add" method="post" enctype="multipart/form-data">
        <div class="layui-form-item">
            <label class="layui-form-label" >商品名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" >上传图片</label>
            <div class="layui-input-block">
                <input type="file" name="img_path" id="photo" value="" required lay-verify="required" autocomplete="off" class="layui-input">
                <div id="divUL" style="width: 150px;height: 150px">

                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">材料</label>
            <div class="layui-input-block">
                <input type="text" name="material" required lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">包装</label>
            <div class="layui-input-block">
                <input type="text" name="pack"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-block">
                <input type="text" name="price" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">花语</label>
            <div class="layui-input-block">
                <textarea name="slogan" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">分类</label>
<%--            花分类sort_id 渲染  --%>
            <a>${requestScope.sorts.get(1).typeName}</a>
            <div class="layui-input-inline">

                <select name="sort_id" id="provid" lay-filter="provid">
                    <option name="sort_id" value="">--请选择分类--</option>
                    <c:forEach items="${sessionScope.sorts}" var="sorts">
                        <option name="sort_id" value="${sorts.id}">${sorts.typeName}</option>
                    </c:forEach>
                </select>

            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="submit" value="立即提交" style="border:5px #FF5722 solid;border-radius: 5%;background-color: #FF5722;color: black;">
                <button type="reset" style="border:5px #FF5722 solid;border-radius: 5%;background-color: #FF5722;color: black;">重置</button>
            </div>
        </div>
    </form>


    <script>
        layui.use(['upload','form'], function() {
            var form = layui.form;
            var upload = layui.upload;
            var layer = layui.layer;
            //监听提交
            form.on('submit(submitBut)', function(data) {
                return true;
            });
            form.verify({
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                ZHCheck: [
                    /^[\u0391-\uFFE5]+$/
                    ,'只允许输入中文'
                ]
            });
        });


        //多张
        document.getElementById("photo").addEventListener("change",function(){
            var files = this.files;
            var oUL = document.getElementById("divUL");
            oUL.innerHTML = "";
            for(var i = 0;i < files.length;i++){
                oUL.innerHTML += '<div><img id="img'+i+'" /></div>'
                var imgList = document.getElementById("img"+i);
                imgList.style.height = "150px";
                imgList.style.width = "150px";
                imgList.src = window.URL.createObjectURL(files[i]);
            }
        });
    </script>


</div>
</body>

</html>
